<template>
  <div>
    课程名称：
    <el-input size="mini" v-model="attendanceConfigQueryDO.course" placeholder="请输入课程名称" style="width:120px"
      @blur="query"></el-input>
    <el-button style="margin-left: 30px;" size="mini" type="primary" @click="addAttendance">新增签到</el-button>
    <el-table v-loading="loading" :data="attendanceConfigQueryDO.pageBean.data" style="width: 100%;margin-top: 7px;"
      highlight-current-row border>
      <el-table-column align="center" type="index" label="序号" width="50px" />
      <el-table-column align="center" prop="course" label="课程名称" width="250px" />
      <el-table-column align="center" prop="courseStartTime" label="签到开始时间" width="200px" />
      <el-table-column align="center" label="签到时间" width="180px">
        <template slot-scope="scope">
          {{ scope.row.signIndate }}分钟
        </template>
      </el-table-column>
      <el-table-column align="center" label="签到地点范围" width="180px">
        <template slot-scope="scope">
          {{ scope.row.signArea }}米
        </template>
      </el-table-column>
      <el-table-column align="center" prop="signPosition" label="签到地点" width="280px" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="seeAttendance(scope.$index, scope.row)">查看签到状况</el-button>
          <el-button size="mini" type="success" @click="download(scope.$index, scope.row)">导出Excel</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="attendanceConfigQueryDO.pageBean.currPage" :page-sizes="pageSizes"
      :page-size="attendanceConfigQueryDO.pageBean.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="attendanceConfigQueryDO.pageBean.totalNum"></el-pagination>
    <el-dialog title="新增签到" :visible.sync="dialogFormVisible" width="60%">
      <el-row :gutter="20">
        <el-col :span="14">
          <div>
            <div>
              <el-form :model="courseMangerQueryVo" :inline="true">
                <el-form-item label="查询课程名称" label-width="140px">
                  <el-input size="mini" v-model="courseMangerQueryVo.courseName" placeholder="请输入课程名称"
                    style="width:130px" @blur="courseQuery"></el-input>
                </el-form-item>
                <el-form-item label="学期：" label-width="140px">
                  <el-select size="mini" v-model="courseMangerQueryVo.term" placeholder="请选择" style="width:140px"
                    @change="courseChange">
                    <el-option key="0" label="2019上学期" value="11"></el-option>
                    <el-option key="1" label="2019下学期" value="12"></el-option>
                    <el-option key="2" label="2020上学期" value="21"></el-option>
                    <el-option key="3" label="2020下学期" value="22"></el-option>
                    <el-option key="4" label="2021上学期" value="31"></el-option>
                    <el-option key="5" label="2021下学期" value="32"></el-option>
                    <el-option key="6" label="2022上学期" value="41"></el-option>
                    <el-option key="7" label="2022下学期" value="42"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <el-form :model="attendanceConfigDO">
              <el-form-item label="课程名称：" label-width="140px">
                <el-select v-model="course" placeholder="请选择" style="width:150px" @change="courseNameChange"
                  value-key="courseName">
                  <el-option :key="item.courseName" :label="item.courseName" v-for="item of courses" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="签到地点范围" label-width="140px">
                <el-input v-model="attendanceConfigDO.signArea" placeholder="请输入签到地点范围，单位M" style="width:220px">
                </el-input>
              </el-form-item>
              <el-form-item label="签到时间" label-width="140px">
                <el-input v-model="attendanceConfigDO.signIndate" placeholder="请输入签到时间" style="width:220px"></el-input>
              </el-form-item>
              <el-form-item label="签到地点" label-width="140px">
                <el-input v-model="attendanceConfigDO.signPosition" placeholder="请在右边地图上选择" :disabled="true"
                  style="width:220px"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <span style="font-size: large;">位置选择</span>
            <baidu-map class="bm-view" center="成都" :scroll-wheel-zoom="true">
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"
                @locationSuccess="locationSuccess"></bm-geolocation>
              <bm-marker :position="positionPoint" :dragging="true" @dragend="dragend">
              </bm-marker>
            </baidu-map>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="签到详情" :visible.sync="attendanceDialog" width="60%">
      <el-table v-loading="loading" :data="studentAttendance" style="width: 100%;margin-top: 7px;" highlight-current-row
        border>
        <el-table-column align="center" type="index" label="序号" width="50px" />
        <el-table-column align="center" prop="signCourse" label="签到课程" width="250px" />
        <el-table-column align="center" prop="studentNumber" label="学号" width="150px" />
        <el-table-column align="center" prop="studentName" label="姓名" width="150px" />
        <el-table-column align="center" prop="signTime" label="签到时间" width="180px" />
        <el-table-column align="center" prop="lateReason" label="迟到理由" width="100px" />
        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            签到状态&emsp;<el-button icon="el-icon-refresh" size="mini" type="primary" @click="getStudentAttendanceList">刷新
            </el-button>
          </template>
          <template slot-scope="scope">
            <el-tag effect="dark" size="medium" type="warning" v-if="scope.row.signState == 0">等待签到</el-tag>
            <el-tag effect="dark" size="medium" type="success" v-if="scope.row.signState == 1">已签到</el-tag>
            <el-tag effect="dark" size="medium" type="danger" v-if="scope.row.signState == 2">未签到</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      course: {},
      positionPoint: {
        lng: 0,
        lat: 0
      },
      attendanceDialog: false,
      dialogFormVisible: false,
      pageSizes: [5, 10, 20, 50],
      loading: false,
      attendanceConfigQueryDO: {
        teacherId: "2015",
        course: "",
        pageBean: {
          currPage: 1,
          pageSize: 10,
          totalPages: 0,
          totalNum: 0,
          data: [],
        },
      },
      attendanceConfigDO: {
        courseStartTime: "",
        signIndate: "",
        course: "",
        courseNumber: "",
        signArea: "",
        courseManagerId: "",
        signPosition: "",
        teacherId: "2015"
      },
      studentAttendanceQueryDO: {
        studentId: "",
        attendanceConfigId: "",
        signCourse: "",
        signState: "",
        pageBean: {
          currPage: 1,
          pageSize: 500,
          totalPages: 0,
          totalNum: 0,
          data: [],
        },
      },
      courseMangerQueryVo: {
        teacherId: "2015",
        term: "",
        courseName: ""
      },
      courses: [],
      studentAttendance: [],
    }
  },
  created() {
    this.getList();
  },
  methods: {
    courseNameChange(e) {
      this.attendanceConfigDO.course = e.courseName;
      this.attendanceConfigDO.courseManagerId = e.id;
    },
    cancle() {
      this.dialogFormVisible = false;
      this.attendanceConfigDO = {
        courseStartTime: "",
        signIndate: "",
        course: "",
        courseNumber: "",
        signArea: "",
        courseManagerId: "",
        signPosition: "",
        teacherId: "2015"
      }
    },
    submit() {
      this.$axios.post("/api/attendance/addAttendance", this.attendanceConfigDO).then(r => {
        this.dialogFormVisible = false;
        this.getList();
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      })

    },
    query() {
      this.attendanceConfigQueryDO.course = this.attendanceConfigQueryDO.course.trim();
      this.getList();
    },
    handleSizeChange(val) {
      this.attendanceConfigQueryDO.pageBean.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.attendanceConfigQueryDO.pageBean.currPage = val;
      this.getList();
    },
    getList() {
      this.$axios
        .post("/api/attendance/listAttendanceConfig", this.attendanceConfigQueryDO)
        .then((r) => {
          this.loading = false;
          this.attendanceConfigQueryDO.pageBean = r.data.data;
        });
    },
    addAttendance() {
      this.dialogFormVisible = true;
    },
    courseQuery() {
      this.courses = [];
      this.$axios
        .post("/api/v1/courseManager/getCourseByTeacher", this.courseMangerQueryVo)
        .then((r) => {
          this.courses = r.data.data;
        });
    },
    courseChange() {
      this.courses = [];
      this.course = {};
      this.courseQuery();
    },
    locationSuccess(p) {
      this.positionPoint.lng = p.point.lng;
      this.positionPoint.lat = p.point.lat;
      this.attendanceConfigDO.signPosition = p.point.lng + "-" + p.point.lat;
    },
    dragend(p) {
      this.positionPoint.lng = p.point.lng;
      this.positionPoint.lat = p.point.lat;
      this.attendanceConfigDO.signPosition = p.point.lng + "-" + p.point.lat;
    },
    seeAttendance(index, row) {
      this.studentAttendanceQueryDO.attendanceConfigId = row.id;
      this.attendanceDialog = true;
      this.getStudentAttendanceList();
    },
    getStudentAttendanceList() {
      this.$axios.post("/api/attendance/listAttendance", this.studentAttendanceQueryDO).then(r => {
        this.studentAttendance = r.data.data.data;
      });
    },
    download(index, row) {
      this.studentAttendanceQueryDO.attendanceConfigId = row.id;
      this.$axios
        .post("/api/attendance/downloadAttendanceRecord", this.studentAttendanceQueryDO, {
          responseType: "blob",
        })
        .then((flow) => {
          if (!flow.data) return;
          const blob = new Blob([flow.data]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.download = "签到记录.xlsx"; // 自定义下载的文件名
          a.href = blobUrl;
          a.click();
          this.$message({
            message: '下载成功',
            type: 'success'
          });
        });
    },
  }
};
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>